<template>
	<view class="cemetery1">
		<view class="con">
			<view class="headList">
				<view v-for="(item, index) in dataObj.peopleList">
					<view
						class="xiangkuang"
						:style="{ backgroundImage: 'url(http://112.124.50.179:8888/imgs/home/xxxxx.png)' }"
					>
						<image :src="item.imageUrl" mode=""></image>
					</view>
					<view class="name">{{ item.name }}</view>
				</view>
			</view>
			<view class="txt" v-if="dataObj.peopleList && dataObj.peopleList.length == 2">
				亲友已祭拜{{ dataObj.worshipTotal }}次,已点亮蜡烛{{ dataObj.candleTotal }}次
			</view>
			<!-- {{dataObj.peopleList[0].deathTime}} -->
			<view class="txt" v-if="dataObj.peopleList && dataObj.peopleList.length == 1">
				{{ dataObj.peopleList[0].gender == 1 ? '他' : '她' }}离开了{{
					death_time.years
				}}年{{ death_time.days }}天
				<br />
				亲友已祭拜{{ dataObj.worshipTotal }}次,已点亮蜡烛{{ dataObj.candleTotal }}次
				<br />
				距离忌日还有{{getDeathRange(dataObj.peopleList[0].deathTime)}}天
			</view>
			<view class="zsh" v-if="time_value == 1 && dataObj.memorialServiceId > 0">
				<text>追思会已结束</text>
				<view @click="goUrl('/subPages/home/memorial_meeting/detail')">
					查看
					<up-icon name="arrow-right" color="#FBC438" size="20rpx"></up-icon>
				</view>
			</view>
			<view class="zsh" v-if="time_value == 2 && dataObj.memorialServiceId > 0">
				<text>{{ start_time }}举行追思会</text>
				<view @click="goUrl('/subPages/home/memorial_meeting/detail')">
					查看
					<up-icon name="arrow-right" color="#FBC438" size="20rpx"></up-icon>
				</view>
			</view>
			<view class="zsh" v-if="time_value == 3 && dataObj.memorialServiceId > 0">
				<text>追思会正在进行中</text>
				<view @click="goUrl('/subPages/home/memorial_meeting/detail')">
					查看
					<up-icon name="arrow-right" color="#FBC438" size="20rpx"></up-icon>
				</view>
			</view>
		</view>
	</view>

	<view class="invite" @click="copyInviteCode">
		复制邀请码
		<image src="http://112.124.50.179:8888/imgs/home/copy.png"></image>
	</view>
	<view class="fixed_">
		<Bubble :list="dataObj.offeringRecordList" />
		<view class="rigth_img">
			<view class="fixed_con_" @click="goUrl('/subPages/home/memoryHall/leaveMess')">
				<image src="http://112.124.50.179:8888/imgs/home/ly.png" mode=""></image>
				<text>留言</text>
			</view>
			<view class="fixed_con_" @click="goUrl('/subPages/home/memoryHall/life_story')">
				<image src="http://112.124.50.179:8888/imgs/home/sp.png" mode=""></image>
				<text>生平</text>
			</view>
		</view>
		<view class="fixed_con">
			<view class="btn1" @click="lightCandle">
				<image src="http://112.124.50.179:8888/imgs/home/hd1.png" mode="" class="h1"></image>
				<image src="http://112.124.50.179:8888/imgs/home/hd3.png" mode="" class="h3"></image>
				<image src="http://112.124.50.179:8888/imgs/home/lh.png" class="text_img" />
				<text>点亮蜡烛</text>
			</view>
			<view class="btn2" @click="openOblation">
				<image src="http://112.124.50.179:8888/imgs/home/lh.png" class="text_img" />
				<text>送取祭品</text>
				<image src="http://112.124.50.179:8888/imgs/home/hd2.png" mode="" class="h2"></image>
			</view>
		</view>
	</view>
	<oblation ref="oblationRef" :offeringType="1" @query="query" />
	<view class="candle" v-if="candle" @click="candle = false">
		<view>感谢点亮</view>
		<image src="http://112.124.50.179:8888/imgs/home/candle.png" mode=""></image>
	</view>
	<view class="goods" v-if="goods" @click="goods = false">
		<image :src="goods_imgs || 'http://112.124.50.179:8888/imgs/home/lh.png'" mode=""></image>
	</view>
</template>

<script setup>
import { defineEmits, watch, defineProps, reactive, ref } from 'vue';
import { timeFormat } from '@/node_modules/uview-plus';
import popupCompVue from '/components/popup/index.vue';
import oblation from '@/subPages/common/oblation.vue';
import Bubble from '@/components/bubble/index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
let props = defineProps(['dataObj']);
let emit = defineEmits(['query']);
watch(
	props.dataObj,
	(n, o) => {
		setTimeout(() => {
			checkTimestamp();
			death_time.value = diffDates(
				props.dataObj.peopleList[0].birthTime,
				props.dataObj.peopleList[0].deathTime
			);
		}, 500);
	},
	{
		immediate: true
	}
);
const oblationRef = ref();
const time_value = ref();
const start_time = ref();
const death_time = ref({});
const candle = ref(false);
const goods = ref(false);
const goods_imgs = ref('');
const query = (e) => {
	if (e.length == 1) {
		goods_imgs.value = e[0];
	} else {
		// 未做
	}
	goods.value = true;
	setTimeout(() => {
		goods.value = false;
	}, 3100);
};
const lightCandle = () => {
	candle.value = true;
	return
	homeApi
		.lightCandleApi({
			memorialId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
			offeringsImageUrl: '1'
		})
		.then((res) => {
			candle.value = true;
			emit('query');
		});
};
const openOblation = () => {
	oblationRef.value.show = true;
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

function diffDates(dateString1, dateString2) {
	const date1 = new Date(dateString1);
	const date2 = new Date(dateString2);
	let yearsDiff = 0;
	let tempDate = date1;

	// 计算完整的年份差异
	while (tempDate.getFullYear() < date2.getFullYear()) {
		tempDate.setFullYear(tempDate.getFullYear() + 1);
		yearsDiff++;
	}

	// 如果年份调整后日期超过了 date2，则回退一年并重新计算
	if (tempDate > date2) {
		yearsDiff--;
		tempDate.setFullYear(tempDate.getFullYear() - 1);
	}

	// 计算剩余的天数差异
	const diffInMilliseconds = date2 - tempDate;
	const diffInDays = Math.ceil(diffInMilliseconds / (1000 * 3600 * 24));

	return {
		years: yearsDiff,
		days: diffInDays
	};
}

function checkTimestamp() {
	const now = new Date().getTime();
	start_time.value = timeFormat(props.dataObj.memorialServiceStartTime, 'yyyy-mm-dd hh:MM:ss');
	// 比较时间戳
	if (
		now > props.dataObj.memorialServiceStartTime &&
		now > props.dataObj.memorialServiceEndTime
	) {
		// 已结束
		time_value.value = 1;
	} else if (now < props.dataObj.memorialServiceStartTime) {
		// 未开始
		time_value.value = 2;
	} else if (
		now > props.dataObj.memorialServiceStartTime &&
		now < props.dataObj.memorialServiceEndTime
	) {
		// 进行中
		time_value.value = 3;
	}
}
const copyInviteCode = () => {
	uni.setClipboardData({
		data: props.dataObj.memorialInvitationCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
		}
	});
};

/**
 * 获取距离忌日时间
 */
const getDeathRange = (deathTime) => {
	const now = new Date();
	const death = new Date(deathTime);
	let memoirDate = new Date();
	if (
		now.getMonth() > death.getMonth() ||
		(now.getMonth() == death.getMonth() && now.getDate() > death.getDate())
	) {
		//如果死亡月日在当前月日之前
		memoirDate = new Date(
			`${now.getFullYear() + 1}-${death.getMonth() + 1}-${death.getDate()}`
		);
	} else {
		memoirDate = new Date(
			`${now.getFullYear()}-${death.getMonth() + 1}-${death.getDate()}`
		);
	}
	const range = Math.ceil((memoirDate - now) / (1000 * 60 * 60 * 24));
	return range
};
</script>

<style lang="scss">
.candle {
	background-color: rgba(0, 0, 0, 0.6);
	height: 100vh;
	border: 1px solid;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 999999;
	top: 0;

	view {
		text-align: center;
		color: rgba(255, 232, 58, 1);
		font-size: 36rpx;
		margin-bottom: 64rpx;
		-webkit-animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
		animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
	}

	image {
		-webkit-animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
		animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
		width: 296rpx;
		height: 660rpx;
	}

	@-webkit-keyframes puff-in-center {
		0% {
			-webkit-transform: scale(2);
			transform: scale(2);
			-webkit-filter: blur(4px);
			filter: blur(4px);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}
	}

	@keyframes puff-in-center {
		0% {
			-webkit-transform: scale(2);
			transform: scale(2);
			-webkit-filter: blur(4px);
			filter: blur(4px);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}
	}
}

.goods {
	background-color: rgba(0, 0, 0, 0.6);
	height: 100vh;
	border: 1px solid;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 999999;
	top: 0;

	image {
		-webkit-animation: slide-out-blurred-top 3s cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
		animation: slide-out-blurred-top 3s cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
		width: 200rpx;
		height: 200rpx;
	}

	@-webkit-keyframes slide-out-blurred-top {
		0% {
			-webkit-transform: translateY(0) scaleY(1) scaleX(1);
			transform: translateY(0) scaleY(1) scaleX(1);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(40px);
			filter: blur(40px);
			opacity: 0;
		}
	}

	@keyframes slide-out-blurred-top {
		0% {
			-webkit-transform: translateY(0) scaleY(1) scaleX(1);
			transform: translateY(0) scaleY(1) scaleX(1);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(40px);
			filter: blur(40px);
			opacity: 0;
		}
	}
}

.cemetery1 {
	color: #fff;
	position: relative;

	.con {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		top: 156rpx;

		.headList {
			display: flex;
			align-items: center;

			.xiangkuang {
				// background: url('http://112.124.50.179:8888/imgs/home/xiangkuang.png') no-repeat;
				background-size: cover;
				background-position: center;
				width: 212rpx;
				height: 272rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 82%;
					height: 85%;
				}
			}
		}

		.name {
			font-size: 36rpx;
			margin-top: 32rpx;
			text-align: center;
		}

		.txt {
			margin-top: 40rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 42rpx;
		}

		.zsh {
			margin-top: 40rpx;
			// width: 324rpx;
			padding: 0 16rpx;
			height: 50rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 33rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			view:nth-child(2) {
				padding-left: 16rpx;
				color: #fbc438;
				display: flex;
				align-items: center;
			}
		}
	}
}

.invite {
	background: rgba(255, 255, 255, 0.2);
	// width: 188rpx;
	padding: 0 16rpx;
	height: 54rpx;
	border-radius: 27rpx 0rpx 0rpx 27rpx;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 30vh;
	right: 0;

	image {
		padding-left: 4rpx;
		width: 32rpx;
		height: 32rpx;
	}
}

.fixed_ {
	position: fixed;
	bottom: calc(constant(safe-area-inset-bottom));
	bottom: calc(env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	padding: 24rpx 32rpx;
	z-index: 50;

	@media screen and (min-width: 992px) {
		width: 828rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.rigth_img {
		color: #fff;
		position: absolute;
		bottom: calc(144rpx + 32rpx);
		right: 32rpx;

		.fixed_con_ {
			display: flex;
			flex-direction: column;
			position: relative;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				white-space: nowrap;
				color: #fff;
				font-size: 24rpx;
				font-weight: Medium;
				position: absolute;
				bottom: 12rpx;
			}
		}
	}

	.fixed_con {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: nowrap;
		height: 144rpx;

		.btn1 {
			width: 326rpx;
			height: 88rpx;
			background: url('http://112.124.50.179:8888/imgs/home/btn1.png') no-repeat;
			background-size: cover;
			background-position: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;

			.h1 {
				width: 84rpx;
				height: 88rpx;
				position: absolute;
				left: -40rpx;
			}

			.h3 {
				width: 92rpx;
				height: 60rpx;
				position: absolute;
				position: absolute;
				right: 0rpx;
				top: -48rpx;
			}

			.text_img {
				width: 60rpx;
				height: 36rpx;
				padding-right: 10rpx;
			}
		}

		.btn2 {
			width: 326rpx;
			height: 88rpx;
			background: url('http://112.124.50.179:8888/imgs/home/btn2.png') no-repeat;
			background-size: cover;
			background-position: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;

			.h2 {
				width: 110rpx;
				height: 130rpx;
				position: absolute;
				position: absolute;
				right: -30rpx;
				// top: -48rpx;
			}

			.text_img {
				width: 60rpx;
				height: 36rpx;
				padding-right: 10rpx;
			}
		}
	}
}
</style>
